<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->
		
		<!-- 日期选择框start -->
		<script type="text/javascript" src="../../libs/js/form/datePicker/WdatePicker.js"></script>
		<!-- 日期选择框end -->
		<script src="../../libs/thirdparty/highcharts/js/highcharts.js"></script>
		
		<!--基本选项卡start-->
		<script type="text/javascript" src="../../libs/js/nav/basicTabModern.js"></script>
		<!--基本选项卡end-->
		
		<script src="../../libs/thirdparty/highcharts/js/highcharts.js"></script>
		<script src="../../libs/thirdparty/highcharts/js/highcharts-more.js"></script>

		<script src="../../libs/js/graphical/jquery.rotate.min.js" type="text/javascript"></script>
		
		<!--数据表格start-->
		<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
		<!--数据表格end-->

		
		<link rel="stylesheet" type="text/css" href="style/style.css"/>
		<style type="text/css">
			
			body{
				background: #EDF2F6;
			}
			
			.basicTabModern_top{
				background: #CDDBE8;
			}
			.basicTabModern_normal_center{
				background: #CDDBE8;
				border: 0;
				border-radius: 0;
				margin: 0;
				border: 1px solid transparent;
				color: #627387;
				height: 39px;
			}
			.basicTabModern_current_center{
				background: #EDF2F6;
				border: 1px solid #BACFE2;
				border-bottom: 0;
				/*color: #48C9A0;*/
			}
			.basicTabModern{
				margin: 0;
			}
			.basicTabModern_top_left{
				border-bottom: 1px solid #BACFE2;
				height: 40px;
			}
			
			.l-panel{
				border: 0;
			}
			.l-grid-row-alt .l-grid-row-cell{
				
			}
			.l-grid-header{
				width: 100%;
				color: #fff;
				border: 0;
			}
			.l-grid table{
				background: #99CFF3;
			}
			.l-grid-body{
				width: 99%;
			}
			.l-grid-hd-cell,
			.l-grid-row-cell{
				border: 0;
			}
			#div1{
				width: 260px;
				margin: auto;
			}
			#div1 iframe{
				/*width: 100%!important;*/
			}
			
			
			.timeline{
		    	width: 260px;
		    	margin: 30px auto 0 auto;
		    	background: url(style/line-bg.png) repeat-y 80px 0;
		    }
		    .timeline ul li .intro{
		    	width: 150px;
		    	margin-left: 50px;
		    }
		    .timeline ul li.circle1 {
			    background: url(style/circle1.png) no-repeat 70px 0px;
			}
			.timeline ul li.circle2 {
			     background: url(style/circle2.png) no-repeat 70px 0px;
			}
			.timeline ul li.circle3 {
			     background: url(style/circle3.png) no-repeat 70px 0px;
			}
			.timeline ul li.circle4 {
			     background: url(style/circle4.png) no-repeat 70px 0px;
			}
			
		</style>
	</head>

	<body>
		<table class="" style="width: 100%;" cellpadding="0" cellspacing="0" border="0">
				<tr>
					
					<td style="width: 100%;border:0;vertical-align: top;">
						<div>
							
							<div class="basicTabModern">
								<div name="Task" style="width:100%;height:0px;">
								</div>
								<div name="Engineering" style="width:100%;height:0px;">
								</div>
								<div name="Department" style="width:100%;height:0px;">
								</div>
								<div name="Coordination" style="width:100%;height:0px;">
								</div>
							</div>
							<div>
								<table class="" style="width: 100%;" cellpadding="0" cellspacing="0" border="0">
									<tr>
										<td style="width: 50%;border:0;vertical-align: top;">
											<div style="height: 480px;padding: 40px 18px 0 50px;">
												<div class="content_1" style="box-shadow: 0 1px 6px rgba(0,0,0,.2);">
													<div class="title">
														<span>Gamification mobile project</span>
														<span style="float: right;">9 people</span>
														<div class="clear"></div>
													</div>
													<div id="maingrid"></div>
												</div>
											</div>
										</td>
										<td style="width: 50%;border:0;vertical-align: top;">
											<div style="height: 480px;padding: 40px 50px 0 18px;">
												<div class="content_1" style="box-shadow: 0 1px 6px rgba(0,0,0,.2);">
													<div class="title">
														<span>Gamification mobile project</span>
														<span style="float: right;">9 people</span>
														<div class="clear"></div>
													</div>
													<div id="maingrid1"></div>
												</div>
											</div>
										</td>
									</tr>
								</table>
							</div>
							<div style="height: 460px;padding: 10px 50px 0 50px;">
								<div class="content_1" style="box-shadow: 0 1px 6px rgba(0,0,0,.2);">
									<div class="title">
										<span>Gamification mobile project > Sprint1 > Sprint2 > Sprint3</span>
										<div class="clear"></div>
									</div>
									<div id="container" style="width: 100%; height: 400px;"></div>
								</div>
							</div>
						</div>
					</td>
					<td style="width: 300px;border: 0;vertical-align: top;">
						<div class="content_1" style="width:300px;height:1024px;">
							<div class="icon_head"></div>
							<div class="icon_head2">
								<span class="icon_head01"></span>
								<span class="icon_head02"></span>
								<span class="icon_head03"></span>
								<span class="icon_head04"></span>
								<span class="icon_head05"></span>
								<div class="clear"></div>
							</div>
							<div id="div1"></div>
							<div class="timeline">
								<ul>
									<li class="cls circle1">
										<p class="date_time">9-1</p>
										<p class="intro">Quick UI2.0Formally launched</p>
									</li>
									<li class="cls circle2">
										<p class="date_time">8-1</p>
										<p class="intro">Quick UI2.0 Beta start</p>
									</li>
									<li class="cls circle3">
										<p class="date_time">7-1</p>
										<p class="intro">The new version of skin pack is complete</p>
									</li>
									<li class="cls circle4">
										<p class="date_time">6-1</p>
										<p class="intro">Quick UI Formally launched</p>
									</li>
									<li class="cls circle1">
										<p class="date_time">9-1</p>
										<p class="intro">Quick UI2.0Formally launched</p>
									</li>
									<li class="cls circle2">
										<p class="date_time">8-1</p>
										<p class="intro">Quick UI2.0 Beta start</p>
									</li>
									<li class="cls circle3">
										<p class="date_time">7-1</p>
										<p class="intro">The new version of skin pack is complete</p>
									</li>
									<li class="cls circle4">
										<p class="date_time">6-1</p>
										<p class="intro">Quick UI Formally launched</p>
									</li>
									<li class="cls circle1">
										<p class="date_time">9-1</p>
										<p class="intro">Quick UI2.0Formally launched</p>
									</li>
									
									
									
								</ul>
							</div>
						</div>
					</td>
				</tr>
			</table>
		
		
		
		
	<script type="text/javascript">
		
		var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
      {"deptName":"2","sex":"1","remark":"好啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":125,"degree":"WebEngineer","age":20,"name":"Leader","deptId":12,"ability":1},
      {"deptName":"3","sex":"1","remark":"备注啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":124,"degree":"JavaEngineer","age":20,"name":"Leader","deptId":11,"ability":2},
      {"deptName":"4","sex":"3","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":123,"degree":"UIDesigner","age":20,"name":"Leader","deptId":9,"ability":2},
      {"deptName":"7","sex":"5","remark":"不错啊","hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":121,"degree":"PHPEngineer","age":20,"name":"Leader","deptId":8,"ability":3},
      {"deptName":"9","sex":"9","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":120,"degree":".NetEngineer","age":20,"name":"Leader","deptId":7,"ability":4},
      {"deptName":"14","sex":"13","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"Account Manager","age":20,"name":"Leader","deptId":6,"ability":5},
     {"deptName":"16","sex":"6","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":114,"degree":"Technical director","age":20,"name":"Leader","deptId":6,"ability":5},
      {"deptName":"0","sex":"11","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":113,"degree":"CEO","age":20,"name":"Leader","deptId":6,"ability":5}
    ]}
		var g;
		var g1;
		var dateSkin = "white_green";
	    function initComplete(){
			g = $("#maingrid").quiGrid({
				columns: [ 
				  { display: 'name', name: 'name', align: 'center',  width: "25%",resizable:false},
				  { display: 'engineering', name: 'sex', align: 'center' , width: "25%",resizable:false},
				  { display: 'task', name: 'deptName',  align: 'center' , width: "25%",resizable:false},
				  { display: 'position', name: 'degree',  align: 'center', width: "25%",resizable:false }
				  
				], data:testData, pageSize: 20, rownumbers:false, checkbox:true,percentWidthMode:true,usePager:false,
				height: '430px', width:"100%"
			});
			g1 = $("#maingrid1").quiGrid({
				columns: [ 
				  { display: 'name', name: 'name', align: 'center',  width: "25%",resizable:false},
				  { display: 'engineering', name: 'sex', align: 'center' , width: "25%",resizable:false},
				  { display: 'task', name: 'deptName',  align: 'center' , width: "25%",resizable:false},
				  { display: 'position', name: 'degree',  align: 'center', width: "25%",resizable:false }
				  
				], data:testData, pageSize: 20, rownumbers:false, checkbox:true,percentWidthMode:true,usePager:false,
				height: '430px', width:"100%"
			});
		      
		    //获取当前主题风格，用于设置日期控件的皮肤
			//平面显示
			
			if(themeColor=="skyblue"){
		    	dateSkin = "white_blue";
		    	$(".content_1 .icon_head").css("backgroundColor","#6BC1F2");
		    }else if(themeColor=="green"){
		    	$(".content_1 .icon_head").css("backgroundColor","#48C9A0");
		    }
		
			WdatePicker({
				skin: dateSkin,
				eCont: 'div1',
				onpicked: function(dp) {
					top.Toast("showNoticeToast", '你选择的日期是:' + dp.cal.getDateStr())
				}
			})
	      
	      
	      
	    }
		
		
		
	$(function(){
		var ranges = [
			[1246406400000, 14.3, 27.7],
			[1246492800000, 14.5, 27.8],
			[1246579200000, 15.5, 29.6],
			[1246665600000, 16.7, 30.7],
			[1246752000000, 16.5, 25.0]
		],
		averages = [
			[1246406400000, 21.5],
			[1246492800000, 22.1],
			[1246579200000, 23],
			[1246665600000, 23.8],
			[1246752000000, 21.4]
		];

    	var color_val=['#6BC1F2'];
		if(themeColor=="mintgreen"){
	    	color_val=['#74D6DD'];
	    }
    	$('#container').highcharts({
    		 chart: {
		        zoomType: 'x'
		    },
		    title: {
		        text: ''
		    },
			
			subtitle: {
				text: document.ontouchstart === undefined ?
                    '' :
                    ''
            },
		
		    xAxis: {
		        type: 'datetime'
		    },
		    
		    yAxis: {
		        title: {
		            text: null
		        }
		    },
		
		    tooltip: {
		        crosshairs: true,
		        shared: true,
		        valueSuffix: '°C'
		    },
		    
		    legend: {
		    },
		
		    series: [{
		    	name: '温度',
		    	data: averages,
		    	zIndex: 1,
		    	marker: {
		    		fillColor: 'white',
		    		lineWidth: 2,
		    		lineColor: '#6DC1F9'
		    	}
		    }, {
		        name: '范围',
		        data: ranges,
		        type: 'arearange',
		        lineWidth: 0,
		    	linkedTo: ':previous',
		    	color: color_val,
		    	fillOpacity: 0.2,
		    	zIndex: 0
		    }],
			colors:['#6DC1F9']
		});
	})
//		function customHeightSet(contentHeight,contentWidth){
//		    g.resetWidth();
//		    g1.resetWidth();
//		    top.Toast('showNoticeToast', '普通提示信息');
//		}
		
	</script>
	</body>

</html>